<template>
  <div class="feedback-management-container">
    <div class="page-header">
      <span class="page-title">意见反馈管理</span>
    </div>

    <!-- 反馈搜索卡片 -->
    <el-card class="search-card">
      <el-form :inline="true" class="search-form">
        <el-form-item label="用户姓名">
          <el-input
            placeholder="请输入用户姓名"
            v-model="searchForm.userName"
            @keyup.enter="loadFeedbacks">
          </el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            placeholder="请选择"
            v-model="searchForm.status"
            @change="loadFeedbacks">
            <el-option label="全部" value=""></el-option>
            <el-option label="待处理" value="pending"></el-option>
            <el-option label="已处理" value="processed"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="反馈时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="loadFeedbacks">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="loadFeedbacks">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 反馈列表卡片 -->
    <el-card class="table-card">
      <div class="feedback-cards">
        <el-card v-for="feedback in feedbackList" :key="feedback.feedbackId" class="feedback-card">
          <div class="feedback-header">
            <span class="feedback-id">反馈单号: {{ feedback.feedbackId }}</span>
            <el-tag
              :type="feedback.status === 'pending' ? 'warning' : 'success'"
              class="status-tag">
              {{ feedback.status === 'pending' ? '待处理' : '已处理' }}
            </el-tag>
          </div>

          <div class="feedback-content">
            <div class="feedback-item">
              <label>用户姓名:</label>
              <span>{{ feedback.userName }}</span>
            </div>

            <div class="feedback-item">
              <label>用户ID:</label>
              <span>{{ feedback.userId }}</span>
            </div>

            <div class="feedback-item">
              <label>反馈内容:</label>
              <span>{{ feedback.content }}</span>
            </div>

            <div class="feedback-item">
              <label>反馈时间:</label>
              <span>{{ feedback.createdAt }}</span>
            </div>
          </div>

          <div class="feedback-footer">
            <el-button
              type="primary"
              link
              @click="editFeedback(feedback)">
              查看详情
            </el-button>
          </div>
        </el-card>

        <el-empty v-if="feedbackList.length === 0 && !loading" description="暂无数据" />
      </div>

      <!-- 分页组件移到这里 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchForm.pageNum"
        :page-sizes="[4, 8, 10, 20]"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage"
        class="pagination"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import router from "@/router"

// 响应式数据
const feedbackList = ref([])
const searchForm = ref({
  userName: '',
  status: '',
  dateRange: [],
  pageNum: 1,
  pageSize: 4
})
const totalPage = ref(0);

// 加载反馈列表
const loadFeedbacks = () => {
  let data = {
    pageNum: searchForm.value.pageNum,
    pageSize: searchForm.value.pageSize,
  }

  if (searchForm.value.userName) {
    data.userName = searchForm.value.userName
  }

  if (searchForm.value.status) {
    data.status = searchForm.value.status
  }

  if (searchForm.value.dateRange && searchForm.value.dateRange.length === 2) {
    data.minDate = searchForm.value.dateRange[0]
    data.maxDate = searchForm.value.dateRange[1]
  }
  axios.get(BASE_URL + `/api/feedbacks/select` , {params:data})
    .then((response) => {
      if(response.data.state === 2001){
        feedbackList.value = response.data.data.list;
        totalPage.value = response.data.data.totalPage;
      }else {
        ElMessage.error(response.data.message);
      }
    })
}

// 重置搜索
const reset = () => {
  searchForm.value = {
    userName: '',
    status: '',
    dateRange: [],
    pageNum: 1,
    pageSize: 4
  }
  loadFeedbacks()
}

// 编辑反馈（查看详情）
const editFeedback = (feedback) => {
  router.push({
    name: 'feedbackProcess',
    query: {
      feedbackId: feedback.feedbackId,
      userId: feedback.userId,
      userName: feedback.userName,
      content: feedback.content,
      createdAt: feedback.createdAt,
      status: feedback.status
    }
  })
}

// 组件挂载时加载数据
onMounted(() => {
  loadFeedbacks()
})

const handleSizeChange = (pageSize) => {
  searchForm.value.pageSize = pageSize;
  loadFeedbacks();
}

const handleCurrentChange = (pageNum) => {
  searchForm.value.pageNum = pageNum;
  loadFeedbacks();
}
</script>

<style scoped>
.feedback-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  color: #303133;
}

.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 0;
}

.search-form :deep(.el-form-item__label) {
  font-weight: 500;
  margin-right: 8px;
}

.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.feedback-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  padding: 20px 0;
  flex-grow: 1;
  overflow-y: auto;
}

.feedback-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.feedback-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.feedback-id {
  font-weight: 600;
  color: #303133;
}

.status-tag {
  font-size: 12px;
}

.feedback-content {
  padding: 15px 20px;
}

.feedback-item {
  display: flex;
  margin-bottom: 12px;
}

.feedback-item:last-child {
  margin-bottom: 0;
}

.feedback-item label {
  width: 80px;
  font-weight: 500;
  color: #606266;
}

.feedback-item span {
  flex: 1;
  color: #303133;
  word-break: break-all;
}

.feedback-footer {
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
  text-align: right;
}

.no-data {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
  color: #909399;
}

.pagination {
  margin-top: 20px;
  padding: 0 20px;
  text-align: left;
}

:deep(.el-dialog) {
  border-radius: 12px;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-input__inner) {
  border-radius: 6px;
}

:deep(.el-button) {
  border-radius: 6px;
  transition: all 0.3s ease;
}

:deep(.el-button:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
  width: 220px;
}
</style>
